<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<style>
    .layui-upload-img{
        border: 1px solid #1E9FFF;
      
        height: 100px;
    
    }
    table tr td{
    	text-align: center;
    	font-size: 15px;
        color: #000;
       
    }
  

</style>
<body>       

<div class="layui-panel" style="padding: 8px;">
	
    <fieldset class="layui-elem-field layui-border-blue" style="padding-top: 8px;">
        <legend class="layui-form-label">商品上架</legend>
    <form  class="layui-form layui-form-pane" style="margin: 20px;padding-top: 20px;">
            <div  class="layui-form-item">
                <label  class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text"  name="name" lay-verify="required" autocomplete="off"  placeholder="商品名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品编号</label>
                <div class="layui-input-block">
                    <input type="text" name="number"  autocomplete="off" placeholder="请输入编号,若不输入随机生产" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-inline" style="width: 50%;">
                    <input type="text" name="marketPrice" lay-verify="required|number" autocomplete="off" placeholder="0.00" class="layui-input">
             
                </div>
                <div class="layui-input-inline">
                 <a class="layui-btn">元</a>
              
                </div>
               
            </div>
               <div class="layui-form-item">
                <label class="layui-form-label">是否新品</label>
                <div class="layui-input-block">
                    <input type="radio" name="newProducts"  value="0" title="新品" checked="checked">
                    <input type="radio" name="newProducts"  value="1" title="非新品">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">是否热卖</label>
                <div class="layui-input-block">
                    <input type="radio" name="heatBuy" value="0" title="热品" checked="checked">
                    <input type="radio" name="heatBuy"  value="1" title="非热品">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">是否在售</label>
                <div class="layui-input-block">
                    <input type="radio" name="status"  value="0" title="在售" checked="checked"> 
                    <input type="radio" name="status"  value="1" title="非在售">
                </div>
            </div>
            
              <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-upload" style="padding-left: 140px;">
                    <button type="button" class="layui-btn" id="test2">点击上传</button>
                    <input type="hidden" name="photo">
                   <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                         预览图：
                     <div class="layui-upload-list layui-upload-img" id="demo2" style="height: 100px;"></div>
                   </blockquote>
                </div>
            </div>
            
              <div class="layui-form-item">
                <label class="layui-form-label">轮播图片</label>
                <div class="layui-upload" style="padding-left: 140px;">
                    <input type="hidden" name="carouselPhoto">
                    <button type="button" class="layui-btn" id="test3">点击上传</button> 
                   <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                         预览图：
                     <div class="layui-upload-list" id="demo3" style="height: 100px;"></div>
                   </blockquote>
                </div>
            </div>
           
              <div class="layui-form-item">
                <label class="layui-form-label">商品单位</label>
                <div class="layui-input-inline">
                    <input type="text" name="unit" lay-verify="required|unit" autocomplete="off" placeholder="单位/个" class="layui-input">
                </div>
            </div>
             
             <div class="layui-form-item">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-block">
              <span id="span"> 
            
              </span>
              <div id="" class="layui-input-inline" style="left: 30px;">
              
              <a class="layui-btn" id="add"><i class="layui-icon layui-icon-add-1" ></i>添加</a> 
              </div>
             </div>
                         
                
            </div>
            
             <div class="layui-form-item">
                <label class="layui-form-label">所属类别</label>
                <div class="layui-inline" style="width: 235px;">
                    <div>
                        <input type="hidden" id="categories" name="categories">
                        <input type="text" id="type" class="layui-input" autocomplete="off" name="" placeholder="请选择类别">
                    <div id="test12" style="display: none"  class="demo-tree-more"></div>
                    </div>
                 </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属名牌</label>
                <div class="layui-inline" style="width: 235px;" >
                      <input id="brandOwner" name="brandOwner" type="hidden">
                    <input name="" placeholder="在输入框提供一些常用的选项" autocomplete="off" class="layui-input" id="brand">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">商品简介</label>
                <div class="layui-input-block">
                    <input type="text" name="introduction" id="introduction" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;">商品详情简介</label>
                <div class="layui-input-block" style="left: 10px;">
                    <textarea lay-verify="content"  class="layui-textarea" id="content" name="content" style="display: none"></textarea>
                </div>
            </div>
     <fieldset class="layui-elem-field layui-border-blue" >
             <label style="font-size: 25px;">商品规格</label>
             <div class="layui-form-item">
             	<div class="layui-input-inline" style="margin: 10px  0 0 10px;">
             		<a class="layui-btn " id="fitstBtn">默认规格</a>
             	    <a id="twoBtn" class="layui-btn layui-bg-gray" style="margin-left: -6px;">多规格</a>
             	   
             	</div> 
             	<div class="layui-inline">
             	   <a id="guige2" class="layui-btn layui-bg-blue" style="float: right;display: none;margin: 10px  0 0 10px;">添加</a>
             	</div>
             </div>

             <table id="firstTable" width="80%" border="1px">
             	
             	<tr>
             		<td width="30%">规格名</td>
             		<td width="30%">规格值</td>
             		<td width="30%">操作</th>
             	</tr>

             	<tr>

             		<td>标准</td>
             		<td style="text-align: center;"><a class="layui-btn layui-bg-blue">标准</a></td>
             	    <td><input name="specification" type="hidden"></td>
             	</tr>
             </table>

            <div id="TableTwo"  style="display: none;width: 80%;">
             <table  border="1" frame="above" id="twoTable" lay-filter="twoTable"></table>
            </div>
     </fieldset> 
      <fieldset class="layui-elem-field layui-border-blue">

      	<label style="font-size: 25px;">货物库存</label>
            <div style="width: 80%;">
           <table  id="numTable" lay-filter="numTable"></table> 
            </div>	     
    </fieldset> 
        <div  style="text-align: center;">
            	<a class="layui-btn" lay-submit="" lay-filter="submitGoods">提交</a>
            	<a class="layui-btn" id="cancel">取消</a>
        </div>
<!--        库存信息-->
        <div id="kuCun" style="display: none;">

            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="number"  autocomplete="off" id="price"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-inline">
                    <input class="layui-input" lay-verify="number"  autocomplete="off" id="num"/>
                </div>
            </div>

        </div>
           </form>
    </fieldset>  
 
</div>

<div id="numEdit" style="display: none;">
	<a class="layui-btn layui-bg-blue" lay-event="edit">编辑</a>
</div>

<div id="tool" style="display: none">
    <a class="layui-btn" lay-event="delete">
        删除
        <i class="layui-icon layui-icon-delete"></i>
    </a>
</div>

   <div id="addGG" style="display: none;">
   	   <div class="layui-form-item">
   	   	  <label class="layui-form-label">规格名</label>
   	   	  <div class="layui-input-inline">
   	   	  	 <input class="layui-input" id="name1"  name="name1"/>
   	   	  </div>
   	   </div>
   	   <div class="layui-form-item">
   	   	  <label class="layui-form-label">规格值</label>
   	   	  <div class="layui-input-inline">
   	   	  	 <input class="layui-input" id="v" name="v"/>
   	   	  </div>
   	   </div>
   	
   </div>





<script>
	var $;
    var i;
    var da = [];
    var dad = [{"id":0,"k":"标准","v":"标准"}];
    var photos = [];
    var carouselPhotos = [];
     var keyword = [];
	var datas = [{"type":da==""?"标准":da,"price":"0","num":"0"}];

    layui.config({
        base:'../../../js/'
    })
	layui.use(['form','upload','jquery','dropdown','layedit','table','element','tree'],function(){
		var upload = layui.upload,dropdown = layui.dropdown,table = layui.table,form=layui.form,tree = layui.tree;
		elem = layui.element;
		$ = layui.jquery;
		
		i=0;
		


		$('#brand').on('click',function (){
		    var data = [];
		    $.ajax({
                type:'get',
                url:'/brand/bc/find',
                dataType:'json',
                success:function (res){
                     $.each(res.data,function (i,d){
                         data.push(d);
                     })
                    console.log(data)
                    dropdown.render({
                        elem: '#brand'
                        ,data: data
                        ,click: function(obj){
                            this.elem.val(obj.title);
                            $('#brandOwner').val(obj.id);

                        }
                        ,style: 'width: 235px;'
                    });
                }
            })


        })

		var layedit = layui.layedit;
        var index = layedit.build('content');
        form.verify({
            content: function(value) {
                return layedit.sync(index);
            }
        });
  form.verify({
      num:function (v,i){
          if (!new RegExp("[0-9]{0,}").test(v)){
              return "必须为数字"
          }
      }
  })

  	upload.render({
    elem: '#test2'
    ,url: '/file/fc/fileUpload' //此处配置你自己的上传接口即可
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
          elem.progress('photoProgress','0%');
      });
    }
    ,done: function(res){
      //上传完毕
            if(!res.is){
                layer.alert('上传失败，请稍后再试......')
            }else{
                 photos.push(res.file.id);
            }
    }
  });
  	upload.render({
    elem: '#test3'
    ,url: '/file/fc/fileUpload' //此处配置你自己的上传接口即可
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo3').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
          elem.progress('photoProgress','0%');
      });
    }
    ,done: function(res){
      //上传完毕
            if(!res.is){
                layer.alert('上传失败，请稍后再试......')
            }else{
                carouselPhotos.push(res.file.id);
            }
    }
  });
  //提交保存
  form.on('submit(submitGoods)',function (obj){
      keyword = [];
      $('.keyword').each(function (i,e){
           keyword.push($(this).val())
      });

      if (keyword!="")
      obj.field.keyword = JSON.stringify(keyword);
      if (photos!="")
      obj.field.photo = JSON.stringify(photos);
      if (carouselPhotos!="")
      obj.field.carouselPhoto = JSON.stringify(carouselPhotos);
      if (da == ""){
          obj.field.specification = JSON.stringify(dad);
      }else {
          obj.field.specification = JSON.stringify(da);
      }
      obj.field.inventory = JSON.stringify(datas);


      var dataForm = obj .field;


      $.ajax({
          type:'post',
          url:'/goods/gc/add1',
          dataType:'json',
          data:dataForm,
          success:function (res){
            layer.msg(res.msg)
              window.location.href='/page/lsl/goodsTable'
          }


      })


  })
        //类目
        $('#type').on('click',function (){
            $.ajax({
                type:'get',
                url:'/category/cc/tree',
                dataType:'json',
                success:function (res){
                    console.log(res)
                    $('#test12').show();
                    tree.render({
                        elem: '#test12'
                        ,data: res
                        ,showLine: false  //是否开启连接线

                        ,click: function(obj){

                            $('#categories').val(obj.data.id)
                            $('#type').val(obj.data.title)

                        }
                    });

                }
            })

        })

     //添加规格按钮
    $('#guige2').on('click',function(){
    	$('#name1').val('');
    	 $('#v').val('');
    	layer.open({
    		type:1,
    		content:$('#addGG'),
    		area:['500px','500px'],
    		btn:['确定','取消'],
    		btn1:function(index){
    			var id = i++;
    			var k = $('#name1').val();
    			var v =  $('#v').val();
    		var dat = {"id":id,"k":k,"v":v};
    			da.push(dat)
    			
    			layer.close(index)
    			   table.reload('twoTable', {
                    data: da,
             });
    			datas[0].type=da;
             table.reload('numTable',{
             	data:datas
             })
    		},end:function(index){
    			
    		}
    	})
    })


//关键字添加
	$('#add').on('click',function(){
		var li = ' <div style="float: left; margin-left: 10px;">'+
             	'<input  style="float: left;width: 90px;"  name="keyword" type="text" value="" lay-verify="required"  class="layui-input keyword">'+
             	'<a  style="width: 60px;float: left;margin-left: 10px;margin-top: 10px;">'+
             		
             		   '<i  class="layui-icon layui-icon-delete" onclick="delect(this)">'+
             		   '</i>'+
             	      '</a>'+
             '</div>';
		$('#span').append(li)

	})
	//库存表单
	table.render({
		elem:'#numTable',
		data: datas,
		cols:[
		[
					{field:'type',align:'center',title:'货物规格',templet:function(obj){

						if(obj.type=="标准"){
							return "标准";
						}
						else  {
						var dat = obj.type;
							var name ="";
							
							$.each(dat,function(i,d){
								name+='<a class="layui-btn">'+d.v+'</a>';
							})
							return name;
                        }
						
					}},
					{field:'price',title:'货物售价',width:100},
					{field:'num',title:'货品数量',width:100},
					{fixed:'right',title:'操作',width:100,toolbar:'#numEdit'},
					
		]
		],
		
	})
        //监听编辑库存信息
        table.on('tool(numTable)',function (obj){
            var event = obj.event;
            if (event=='edit') {
                alert()
                $('#price').val('');
                $('#num').val('');
                layer.open({
                    type: 1,
                    content: $('#kuCun'),
                    area: ['500px', '500px'],
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        datas[0].price = $('#price').val();
                        datas[0].num = $('#num').val();
                        table.reload('numTable', {
                            data: datas
                        })
                        layer.close(index);
                    }, end: function (index) {

                    }
                })
            }
        })
        //规格表格
		table.render({
		elem:'#twoTable',
		data: da,
		cols:[
		[
					{field:'k',align:'center',title:'规格名'},
					{field:'v',title:'规格值'},
				     
					{fixed:'right',title:'操作',width:100,toolbar:'#tool'},
		]
		],
		
	})
        //删除规格
        table.on('tool(twoTable)',function (obj){
            var event = obj.event;
            var  dataForm = obj.data;
            console.log(da)
            //removeByValue(arr, 'age', '15')删除da
            if ('delete'==event){
                index = 0;
                for (var i=0;i<da.length;i++){
                    if(da[i].id==dataForm.id){
                        index=i;
                    }
                }
                alert(index)
                da.splice(index,1);
                table.reload('twoTable')
                datas[0].type =da==""?"标准":da;
                table.reload('numTable')
            }

        })
		
     $('#twoBtn').on('click',function(that){
 
       $('#fitstBtn').removeClass('layui-bg-black');
       
     	$('#fitstBtn').addClass('layui-bg-gray');
     	$('#twoBtn').removeClass('layui-bg-gray');
     	$('#firstTable').hide()
     	$('#TableTwo').show();
     	$('#guige2').show()

     	
     })
       $('#fitstBtn').on('click',function(that){
   
       $('#fitstBtn').removeClass('layui-bg-gray');
       
     	$('#twoBtn').addClass('layui-bg-gray');	
     	$('#TableTwo').hide();
     	$('#firstTable').show()
     	 	$('#guige2').hide()
           da = [];
     	datas[0].type=da==""?"标准":da;
           table.reload('twoTable',{
               data:da
           });
         table.reload('numTable', {

          data: datas,
      });
     })
 
})

function delect(that){
	$(that).parent().parent().remove()
}
</script>


</body>
</html>